/*
 * @Author: mylesshie@gmail.com
 * @Date: 2020-07-04 11:54:18
 * @LastEditors: mylesshie@gmail.com
 * @LastEditTime: 2020-09-12 22:57:43
 * @description:
 */

import React, { useEffect } from 'react'
import { SafeAreaView, View, StatusBar } from 'react-native'
import { WebView } from 'react-native-webview'
import styles from './styles'

const Webview = ({ navigation, route }) => {
  useEffect(() => {
    navigation.setOptions({
      title: route.params.title,
      headerShown: !route.params.fullScreen
    })
  }, [])

  const onMessageFunc = event => {
    console.log('onMessageFunc:', event.nativeEvent.data)
    let code = event.nativeEvent.data
    if (code === 'webViewClose') {
      navigation.goBack()
    }
  }

  return (
    <>
      {route.params.fullScreen ? (
        <StatusBar
          barStyle="dark-content"
          backgroundColor="#fff"
          translucent={false}
        />
      ) : null}
      <SafeAreaView style={styles.wrap}>
        <View style={styles.container}>
          <WebView
            source={{ uri: route.params.url }}
            style={styles.webview}
            geolocationEnabled={true}
            useWebKit={true}
            onMessage={event => onMessageFunc(event)}
          />
        </View>
      </SafeAreaView>
    </>
  )
}

export default Webview
